<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="UTF-8">
    <title>详情</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">


</head>
<body>
<div th:insert="~{public/publicTop::top}"></div>

<form th:action="@{/buy/pay}">
    <div style="width: 70%; text-align: center;margin: auto;">
        <h2 th:text="${msg}" th:if="${!#strings.isEmpty(msg)}"></h2>
        <h2 style="color: #f25807;">购物车</h2>
        <table class="layui-table" lay-skin="line">
            <colgroup>
                <col width="150">
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th style="width: 10%"><input type="checkbox" onclick="selectALl(this)">全选</input></th>
                <th style="width: 25%">商品名</th>
                <th style="width: 25%"></th>
                <th style="width: 10%">颜色</th>
                <th style="width: 20%">单价</th>
                <th style="width: 10%">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="car:${cars}" >
                <td>
                    <input th:disabled="${ car.getGstate() == 0}" type="checkbox" name="buys" th:value="${car.getId()}" onclick="btnclick()">
                    <p th:if="${ car.getGstate() == 0}">已下架</p>
                    </td>
                <td ><p th:text="${car.getName()}" style="display: inline; " ></p> </td>
                <td><img style="display: inline;margin-left: 0px;" th:src="@{'/img/'+${car.getImg()}}"></td>
                <td th:text="${car.getColor()}"></td>
                <td th:text="${car.getPrice()}"></td>
                <td><a class="layui-btn" style="background-color: red" th:href="@{'/buy/del/'+${car.getId()}}">删除</a></td>
            </tr>
            </tbody>
        </table>
        <input id="jiesuan" type="submit" disabled=true style="background-color: #f25807" class="layui-btn" value="结算">
    </div>

</form>

</body>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script >
    layui.use('form', function(){
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        form.render();
    });

    function selectALl(a){
        var s=document.getElementsByName("buys");
        console.log(s);
        for (var sElement of s) {
            sElement.checked=a.checked;
        }
        btnclick();
    }
    function btnclick(){
        var s=document.getElementsByName("buys");
        let sum=0;
        for (var sElement of s) {
            if (sElement.checked){
                sum++;
            }
        }
        if (sum<=0){
            console.log("no");
            let jiesuan = document.getElementById("jiesuan");
            jiesuan.disabled=true;
        }else{
            console.log("yes");
            let jiesuan = document.getElementById("jiesuan").disabled=false;
        }
    }
</script>
</html>